<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    switchFullscreen
    :confirmLoading='confirmLoading'
    @ok='handleOk'
    @cancel='handleCancel'
    cancelText="关闭">
    <a-form-model ref='form' :model='model'>
      <a-row>
        <a-col :span='12'>
          <a-form-model-item label='商品名称' :labelCol='labelCol' :wrapperCol='wrapperCol' required prop='cpName'>
            <a-input v-model='model.goodsName' readOnly></a-input>
          </a-form-model-item>
        </a-col>
        <a-col :span='12'>
          <a-form-model-item label='售价' :labelCol='labelCol' :wrapperCol='wrapperCol'  required prop='cpPrice'>
            <a-input v-model='model.price'  style='width: 50%'  readOnly addon-after="元"/>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col justify='start'>
          <a-form-model-item label='用法'  :labelCol='{span: 3}' :wrapperCol='{span: 19}' >
            <a-textarea row='5' v-model='model.instructions' readOnly></a-textarea>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col justify='start'>
          <a-form-model-item label='描述'  :labelCol='{span: 3}' :wrapperCol='{span: 19}' >
            <a-textarea row='5' v-model='model.remark' readOnly></a-textarea>
            <div class="ant-form-explain">注：该描述一般会高亮出现在营养名称后面，20字符以内。</div>
          </a-form-model-item>
        </a-col>
      </a-row>
      <a-row justify='start'>
        <a-form-model-item label='主图' :labelCol='{span: 3}' :wrapperCol='{span: 19}'>
          <img width="200" :src="model.imageUrl"/>
        </a-form-model-item>
      </a-row>
      <a-row justify='start'>
        <a-form-model-item label='详情图' :labelCol='{span: 3}' :wrapperCol='{span: 19}'>
          <a-col span="20" class="goods-detail-preview-warp">
            <div class="desc-pic-item" v-for="dec in model.description">
              <img :src="dec.pic" v-if="dec.type=='pic'" />
            </div>
          </a-col>
        </a-form-model-item>
      </a-row>
    </a-form-model>
  </j-modal>
</template>

<script>
  import { postAction, getAction } from '@api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@comp/jeecg/JFormContainer'
  import JDate from '@comp/jeecg/JDate'
  import JImageUpload from '@comp/jeecg/JImageUpload'
  import JCheckbox from '@comp/jeecg/JCheckbox'
  import JSearchSelectTag from '@comp/dict/JSearchSelectTag'
  import JEditor from '@comp/jeecg/JEditor'

  export default {
    name: 'OrdCpInfoModal',
    components: {
      JFormContainer,
      JDate,
      JImageUpload,
      JCheckbox,
      JSearchSelectTag,
      JEditor
    },
    data () {
      return {
        title:'',
        width:1280,
        visible: false,
        izAdd: false,//是否是新增
        model: {
          ordType: '2'
        },
        cpExtModel: {},//菜品扩展信息
        categoryList: [],
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        confirmLoading: false,
        validatorRules: {
          cpName: [{ required: true, message: '请输入菜品名称!' }],
          cpPrice: [{ required: true, message: '请输入价格!' }],
        },
        url: {
          queryById: '/store/machine/queryById',
        },
        patientDiseaseOption: []
      }
    },
    created() {
    },
    methods: {
      add() {
        this.model = Object.assign({}, {});
        this.visible = true
      },
      edit(record) {
        this.visible = true
        const that = this
        getAction(this.url.queryById + '?id=' + record.packageId).then((res) => {
          that.model = res.result
        })
      },
      close() {
        this.$emit('close')
        this.visible = false
      },
      handleOk() {
        this.close()
      },
      handleCancel() {
        this.close()
      },

    }
  }
</script>

<style>
.goods-detail-preview-warp .desc-pic-item img {
  max-width: 100%;
  display: block;
  width: 100%;
}

</style>